<template>
  <section>
    <div class="flex-start">
      <span style="font-size:16px;">调度对象：</span>
      <div class="drag">
        <div v-for="({label, checked, activeIcon, icon},index) in fieldList"
             :key="label + index"
             :class="checked ? 'active' : ''"
             class="drag__item"
             draggable
             @click="handleClick(index)">
          <icon-svg :icon-name="checked ? activeIcon : icon" />
          <span :class="checked ? 'activeLabel ml5' : 'ml5'">{{label}}</span>
          <span v-show="checked"
                class="icon-iconclass">
            <img src="@/static/images/xuanzhong.png">
          </span>
        </div>
      </div>
    </div>
    <el-divider />
    <div v-if="activeName === 'first'">
      <div class="titleSty">承运方选择</div>
      <CarrierSelectCard :disabled="disabled"
                         :filter="{
                          type: [0, 1],
                          status: 1
                         }"
                         @submit="handleSubmit"
                         v-on="$listeners" />
    </div>
    <div v-else>
      <SelfSupport ref="selfSupport"
                   :waybill-id="waybillId"
                   :url="url"
                   @changeActive="handleClick"
                   v-on="$listeners" />
    </div>
    <driver-dispatch-dialog v-if="driverDispatchVisible"
                            :driver-dispatch-visible.sync="driverDispatchVisible"
                            :record="value"
                            :dispatch-type="'waybill'"
                            @handleDispatch="handleDispatch" />
  </section>
</template>
<script>
import axios from "axios";
import CarrierSelectCard from "@basic/CarrierSelectCard.vue";
import SelfSupport from "@/components/basic/SelfSupport.vue";
import DriverDispatchDialog from "@/components/table/dialog/DriverDispatchDialog.vue";
import { user } from "@/api/index";

export default {
  name: "QuickDispatch",
  components: {
    CarrierSelectCard,
    SelfSupport,
    DriverDispatchDialog
  },
  props: {
    value: Object,
  },
  data () {
    return {
      disabled: false,
      driverDispatchVisible: false,
      activeName: 'first',
      action: null,
      fieldList: [
        { label: "承运方", checked: true, icon: "chengyunfang", activeIcon: "chengyunfang1" },
        { label: "自营", checked: false, icon: "ziying", activeIcon: "ziying1" },
      ],
      permission: false
    }
  },
  computed: {
    waybillId () {
      return this.value?.id;
    },
    url () {
      return "/transport/waybill/quick/dispatch";
    },
  },
  created () {
    this.getPermission()
  },
  methods: {
    handleClick (index) {
      if (index) {
        this.activeName = 'second';
        this.fieldList[index - 1].checked = false;
      } else {
        this.activeName = 'first';
        this.fieldList[index + 1].checked = false;
      }
      this.fieldList[index].checked = true;
    },
    handleDispatch (fee) {
      this.disabled = true;
      let params = { waybillId: this.waybillId, carrierId: this.action.carrierId }

      axios({
        method: "POST",
        url: this.url,
        data: fee ? { ...params, fee } : params
      }).then(res => {
        if (res.code === 0) {
          this.$emit("confirm");
          this.disabled = false;
          this.$message({ type: "success", message: "调度成功" });
        }
      }).catch(err => {
        this.disabled = false;
      })
    },
    async getPermission () {
      let { code, data } = await user.getPermission();
      if (code === 0) {
        this.permission = data.canQuote;
      }
    },
    // FIXME: 将submit抽象出来就可以移到框架里去
    async handleSubmit (action) {
      if (!action?.hasTransportAuthority) {
        return false;
      }
      if (!action) {
        return this.$message.warning(`请选择承运方！`)
      }
      this.action = action;

      if (this.permission && action?.extraType && !this.value?.billDayStatus) {
        this.driverDispatchVisible = true;
      } else {
        this.handleDispatch();
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 20px 0;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.titleSty {
  width: 200px;
  height: 14px;
  border-left: 2px solid var(--prev-color-primary);
  padding-left: 6px;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
}
.drag {
  display: flex;
  flex-wrap: wrap;
  &__item {
    margin: 5px;
    line-height: 35px;
    text-align: center;
    color: var(--prev-color-text-ashes);
    border: 1px solid var(--prev-border-color-grey);
    opacity: 1;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    font-weight: 400 !important;
    padding: 0 20px;
  }
  .icon-iconclass {
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0;
    bottom: 0;
    img {
      width: 22px;
      height: 22px;
    }
  }
}
.active {
  transition: transform 0.3s;
  border: 1px solid var(--prev-color-primary);
}
.activeLabel {
  color: var(--prev-color-primary);
}
.ml5 {
  margin-left: 5px;
}
</style>